<template>
<div class="wrapper">
  <img class="title-img " src="http://img1.qunarzz.com/piao/fusion/1711/89/ebc329f16c55bb02.png" alt=""><span class="title">猜你喜欢</span>
  <ul>
    <router-link tag="li" class="item border-bottom" v-for="item of list" :key="item.id" :to="'/detail/'+ item.id">
        <div class="item-img-wrapper">
        <img class="item-img"  :src="item.imgUrl" alt="">
        </div>
      <div class="like-tag" style="background-image:url(https://img1.qunarzz.com/piao/fusion/1802/20/2ba6d10b17972e02.png)">随买随用</div>
      <div class="item-info">
        <div class="item-title">{{item.title}}</div>
        <div class="item-comment"><span class="comment-star">★★★★★</span><span class="comment-num">6724条评论</span></div>
        <div class="item-price"><span class="icon-price">¥<em class="price-num">{{item.price}}</em></span>起</div>
        <div class="item-feature"><div class="feature-desc">{{item.desc}}</div></div>
      </div>
    </router-link>
  </ul>
</div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props: {
    list: Array
  }
}
</script>

<style lang="stylus" scoped>
  @import "~styles/varibles.styl"
  .wrapper
    margin-top .2rem
    background-color #ffffff
    .title
      line-height .8rem
      margin-top .2rem
      text-indent .2rem
      color $iconColor
      font-size: .30rem;
    .title-img
      display: inline-block;
      overflow: hidden;
      width: .3rem;
      height: .3rem;
      margin:0 .2rem;
    .item
      display flex
      position relative
      padding: .2rem;
      overflow hidden
      .item-img-wrapper
        width 2rem
        height 2rem
        .item-img
          width 100%
      .like-tag
        position: absolute;
        top: 0.2rem;
        left: 0.2rem;
        width: 1.02rem;
        height: 0.29rem;
        background-size: 100%;
        color: #fff;
        font-size: 0.24rem;
        text-indent: .02rem;
      .item-info
        overflow hidden
        padding-left: .22rem;
        .item-title
          margin-top: .26rem;
          height: .44rem;
          color: #212121;
          font-size: .32rem;
          line-height: .44rem;
        .item-comment
          margin-top .2rem
          .comment-star
            color: #ffb436;
            font-size 0.34rem
          .comment-num
            color: #616161;
            font-size: .24rem;
            line-height: .34rem;
            margin-left .16rem
            vertical-align: text-bottom;
        .item-price
          margin-top: .22rem;
          color: #616161;
          font-size: .24rem;
          line-height: .4rem;
          .icon-price
            color: #ff8300;
          .price-num
            font-size .4rem
            font-style: normal;
        .item-feature
          display: inline-block;
          margin-top: .48rem;
          margin-right: .24rem;
          background: #fff9f9;
          padding: .04rem .1rem;
          color: #f55;
          font-size: .24rem;
          line-height: .34rem;
          .feature-desc
            display: -webkit-box;
            overflow: hidden

</style>
